<template>
  <ul>
    <li v-for="(item,index) in data">
      <p class="first">{{item.text}}</p>
      <p>{{item.time}}</p>
    </li>
  </ul>
</template>
<script>
import xlContent from '@c/content.vue'

export default {
  name: 'logInfo',
  components:{
    
  },
  props:['data'],
  data () {
    return {
      
      }
  },
methods:{
    
  }
}
</script>

<style lang='scss' scoped>
ul{
  background-color: #fcfcfd;
  li{
    margin-left:100px;
    padding:20px 3% 20px 0;
    border-bottom: 1px solid #dcdcdc;
    position: relative;
      &:first-child{
        color:#fb4700;
        &:after{
        height: 70%;
        top:initial;
        bottom:0;
      }
      }
      &:after{
        // 进度条
        content:' ';
        display: block;
        width:1px; /*no*/
        height:100%;
        position: absolute;
        top: 0;
        left: -50px;
        bottom: 0;
        background-color: #ccc;
        z-index:999;
      }
      &:first-child:before{
        width: 32px;
        height: 32px;
        background-color: #fb4700;
        left:-64px;
      }
      &:before{
        content: ' ';
        display: block;
        width:16px; 
        height:16px; 
        background-color: #ccc;
        border-radius: 50%;
        position: absolute;
        left:-57px;
        top:30px;
        z-index:1000;
      }
    p{
      &.first{
        font-size: 26px;/*px*/
        margin-bottom: 10px;
      }
      &:last-child{
        font-size: 22px;/*px*/
      }
    }
  }
}
</style>